import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:gt_flutter_admin/pages/login/login_controller.dart';
import 'package:gt_flutter_admin/res/images.dart';

class LoginView extends GetView<LoginController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        constraints: BoxConstraints.expand(),
        decoration: BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.fill,
            image: AssetImage(loginBackgroundImg),
          ),
        ),
        child: Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: Colors.black54,
                offset: Offset(2.0, 2.0),
                blurRadius: 4.0,
              ),
            ],
            borderRadius: BorderRadius.circular(6.0),
            color: Colors.white.withAlpha((0.9 * 255).round()),
          ),
          height: 420,
          width: 400,
          child: Column(
            children: [
              Expanded(
                flex: 1,
                child: Container(
                  child: Center(
                    child: Text(
                      'GT后台管理系统',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.w800,
                        fontSize: 18,
                      ),
                    ),
                  ),
                ),
              ),
              Divider(
                color: Colors.white,
                height: 2,
                thickness: 1,
                endIndent: 0,
              ),
              Expanded(flex: 6, child: ListView(children: [_buildForm()])),
            ],
          ),
        ),
      ),
    );
  }

  // 构建表单
  Container _buildForm() {
    return Container(
      padding: EdgeInsets.all(20),
      child: Form(
        autovalidateMode: AutovalidateMode.onUserInteraction,
        child: Column(
          children: [
            TextFormField(
              autofocus: true,
              controller: controller.nameText,
              decoration: InputDecoration(
                labelText: '用户名',
                hintText: '请输入用户名',
                icon: Icon(Icons.person),
              ),
              validator: (value) => value!.length > 0 ? null : '用户名不能为空',
            ),
            TextFormField(
              controller: controller.passwordText,
              decoration: InputDecoration(
                labelText: '密码',
                hintText: '请输入密码',
                icon: Icon(Icons.lock),
              ),
              obscureText: true,
              validator: (value) => value!.length > 0 ? null : '密码不能为空',
            ),
            Row(
              children: [
                Expanded(
                  flex: 2,
                  child: TextFormField(
                    controller: controller.codeText,
                    decoration: InputDecoration(
                      labelText: '验证码',
                      hintText: '请输入验证码',
                      icon: Icon(Icons.key),
                    ),
                    validator: (value) => value!.length > 0 ? null : '验证码不能为空',
                  ),
                ),
                GestureDetector(
                  onTap: controller.onChangeCaptcha,
                  child: controller.obx((captcha) {
                    return Image.memory(
                      Base64Decoder().convert(captcha!.img.split(',')[1]),
                      fit: BoxFit.cover,
                    );
                  }, onLoading: Container()),
                ),
              ],
            ),
            Padding(
              padding: EdgeInsets.only(top: 35),
              child: Row(
                children: [
                  Expanded(
                    flex: 1,
                    child: Builder(
                      builder: ((context) => ElevatedButton(
                        child: Padding(
                          padding: EdgeInsets.all(10),
                          child: Text('登录'),
                        ),
                        onPressed: () {
                          if (Form.of(context).validate()) {
                            controller.onSubmit();
                          }
                        },
                      )),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
